<template>
  <div class="app-container home">
    <el-container style="margin: 10px">
      <el-header style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 10px 30px" height="600">
          <div style="font-weight: bold;font-size: 32px" align="center">
            MakeT生产过程执行管理系统
          </div>
        <el-divider content-position="center" style="background-color: #97a8be !important;">欢迎使用本系统</el-divider>
<!--        <el-row :gutter="100">-->
<!--          <el-col :span="6" class="btn-col">-->
<!--            <el-button type="primary" icon="el-icon-edit" @click.native="">跳转页面名称</el-button>-->
<!--          </el-col>-->
<!--          <el-col :span="6" class="btn-col">-->
<!--            <el-button type="primary" icon="el-icon-edit" @click.native="">跳转页面名称</el-button>-->
<!--          </el-col>-->
<!--          <el-col :span="6" class="btn-col">-->
<!--            <el-button type="primary" icon="el-icon-edit" @click.native="">跳转页面名称</el-button>-->
<!--          </el-col>-->
<!--          <el-col :span="6" class="btn-col">-->
<!--            <el-button type="primary" icon="el-icon-edit" @click.native="">跳转页面名称</el-button>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </el-header>
      <el-divider></el-divider>
      <el-main>
        <e-charts style="height: 400px" class="chart" :option="option"/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      data:[
        {
          name:"订单数",
          value:"100"
        },
        {
          name:"出库数量",
          value:"200"
        },
        {
          name:"入库数量",
          value:"300"
        },
        {
          name:"成交数",
          value:"50"
        },
      ]
    };
  },
  computed:{
    option(){
      return {
        xAxis: {
          type: "category",
          data: this.data.map(d => d.name)
        },
        yAxis: {},
        series: [{
          name: '数据',
          type: 'bar',
          data: this.data.map(d => d.value)
        }]
      }
    }

  }
};
</script>

<style scoped lang="scss">
.btn-col {
  display: flex;
  justify-content: center;
}
</style>

